import {
  defineComponent,
  ref,
  onUnmounted,
  onMounted,
  nextTick,
  inject,
} from "vue";
import { useRouter } from "vue-router";
import { session } from "@/utils/storage";
import {
  ElMessage as message,
  ElTabs as Tabs,
  ElTabPane as TabPane,
  ElIcon as Icon,
  ElInput as Input,
  ElButton as Button,
  ElSelect as Select,
  ElOption as Option,
} from "element-plus";
import { User, Lock, Iphone, CircleCheck } from "@element-plus/icons-vue";
import type { TabsPaneContext } from "element-plus";
import loginLogo from "@/assets/images/首航.svg";
import { getCode } from "@/api/views/login/index";
import variables from "@/styles/variables.module.scss";
import { useI18n } from "vue-i18n";

export default defineComponent({
  name: "login",
  setup() {
    const $router = useRouter();
    const username = ref("admin");
    const password = ref("123456");

    const mobile = ref("15879107577");
    const verify = ref("");

    const handleLogin = () => {
      if (username.value == "admin" && password.value == "123456") {
        session.set("token", new Date().getTime());
        $router.push("/");
        return;
      }
      message.error("账号或密码错误！");
    };
    const activeName = ref("password-login");
    const handleClick = (tab: TabsPaneContext, event: Event) => {};

    // 定时器id
    let clearId: any;
    // 倒计时时间
    const codeNum = ref(60);
    // 是否发送了验证码 防止连点
    const isClickSend = ref(false);
    // 发送验证码
    const sendCode = async () => {
      if (isClickSend.value || codeNum.value != 60) return;
      isClickSend.value = true;
      const res = await getCode({
        mobile: mobile.value,
      });
      clearId = setInterval(() => {
        codeNum.value--;
        if (codeNum.value == 0) {
          clearInterval(clearId);
          codeNum.value = 60;
          isClickSend.value = false;
        }
      }, 1000);
    };

    onUnmounted(() => {
      clearInterval(clearId);
    });

    onMounted(() => {
      nextTick(() => {});
    });

    const showPassword = ref(false);
    const handleShowPwd = () => {
      showPassword.value = !showPassword.value;
    };

    const cacheLang = session.get("lang");
    const handleLang: any = inject("handleLang");
    const lang = cacheLang ? ref(cacheLang) : ref("zhCN");
    const { locale } = useI18n();
    const { t } = useI18n();

    const changeLang = (val: string) => {
      locale.value = val;
      session.set("lang", val);
      handleLang(val);
    };

    return () => (
      <div class="s-login">
        <div class="s-login__title">
          <img class="s-login__logo" src={loginLogo} alt="" />
          <Select
            v-model={lang.value}
            class="s-login__lang"
            placeholder="选择语言"
            size="small"
            onChange={changeLang}
          >
            {[
              { value: "en", label: "English" },
              { value: "zhCN", label: "中文简体" },
              { value: "zhCT", label: "中文繁体" },
              { value: "french", label: "Français" },
            ].map((item, index) => (
              <Option key={index} label={item.label} value={item.value} />
            ))}
          </Select>
        </div>
        <Tabs
          v-model={activeName}
          class="s-login__tabs"
          onTabClick={handleClick}
        >
          <TabPane label={t("login.passwordLogin")} name="password-login">
            <div class="s-login__username">
              <Input
                size="large"
                type="text"
                placeholder={t("login.usernameTips")}
                v-model={username.value}
                prefix-icon={<User />}
              />
            </div>
            <div class="s-login__password">
              <Input
                size="large"
                type={showPassword.value ? "text" : "password"}
                placeholder={t("login.passwordTips")}
                v-model={password.value}
                v-slots={{
                  prefix: () => (
                    <Icon>
                      <Lock />
                    </Icon>
                  ),
                  suffix: () => (
                    <Icon onClick={handleShowPwd}>
                      {{
                        default: () => (
                          <svg-icon
                            name={showPassword.value ? "睁眼" : "闭眼"}
                            style={{
                              cursor: "pointer",
                              color: "#9c9c9c",
                              fontSize: "18px",
                            }}
                          ></svg-icon>
                        ),
                      }}
                    </Icon>
                  ),
                }}
              />
            </div>
          </TabPane>

          <TabPane label={t("login.smsLogin")} name="sms-login">
            <div class="s-login__phone">
              <Input
                size="large"
                type="text"
                placeholder={t("login.mobileTips")}
                v-model={mobile.value}
                prefix-icon={<Iphone />}
              />
            </div>
            <div class="s-login__verify">
              <Input
                size="large"
                type="text"
                placeholder={t("login.codeTips")}
                maxlength={6}
                v-model={verify.value}
                v-slots={{
                  prefix: () => (
                    <Icon>
                      <CircleCheck
                        color={
                          verify.value.length == 6
                            ? variables.green01
                            : "#a8abb2"
                        }
                      />
                    </Icon>
                  ),
                }}
              />
              <span onClick={sendCode} class="s-login__code">
                {codeNum.value === 60 ? t("login.getCode") : codeNum.value}
              </span>
            </div>
          </TabPane>

          <Button class="s-login__submit" onClick={handleLogin}>
            {t("login.login")}
          </Button>
          <div class="s-login__forget">
            {activeName.value === "password-login" ? (
              <>
                <Button type="primary" link={true}>
                  {t("login.forgotPassword")}
                </Button>
                <Button type="primary" link={true}>
                  {t("login.forgotAccount")}
                </Button>
              </>
            ) : null}
            <Button type="primary" link={true}>
              {t("login.accountRegistration")}
            </Button>
          </div>
        </Tabs>
      </div>
    );
  },
});
